<template>
  <div class="app-container">
    <el-row>
      <el-button v-if="litQuery.id !== ''" v-on:click="goback" round
        ><i class="el-icon-arrow-left"></i>返回
        <span style="color: red; font-weight: bold">{{ selectRow.name }}</span>
      </el-button>
      <el-button type="primary" @click="edit('add',null)" round>添加</el-button>
      <el-button type="success" @click="edit('save',selectRow)" round>修改</el-button>
      <el-button type="danger" @click="delRows" round>删除</el-button>

      <el-input
        style="width: 250px; margin-left: 10px"
        v-model="litQuery.s"
        placeholder="编码、名称、值、备注"
        round
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>

      <el-button v-on:click="load" style="margin-left: 10px" round
        >查询</el-button
      >
    </el-row>
    <el-row>
      <el-table
        :data="pageData.content"
        @row-dblclick="rowdbclick"
        @selection-change="handleSelectionChange"
      >
        style="width: 100%" >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="code" label="编码" width="180">
        </el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="val" label="值"> </el-table-column>
        <el-table-column prop="mark" label="备注"> </el-table-column>
        <el-table-column label="启用/停用">
          <template slot-scope="scope">
            <i v-if="scope.row.enable" class="el-icon-check"></i>
            <i v-else class="el-icon-close"></i>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <div style="float: right; margin-top: 10px">
      <el-pagination
        @size-change="sizeChange"
        @current-change="pageChange"
        :page-sizes="[10, 20, 30, 40, 50, 100, 200, 1000]"
        :page-size="pageData.size"
        :current-page.sync="pageData.page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.totalElements"
      >
      </el-pagination>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      title="编辑字典"
      :visible.sync="dialogFormVisible"
    >
      <el-form :rules="rules" :model="formData" ref="formData">
        <el-form-item label="编码" label-width="100px" prop="code">
          <el-input autocomplete="off" v-model="formData.code"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name" label-width="100px">
          <el-input autocomplete="off" v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="值" label-width="100px" prop="val">
          <el-input autocomplete="off" v-model="formData.val"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="mark" label-width="100px">
          <el-input autocomplete="off" v-model="formData.mark"></el-input>
        </el-form-item>
        <el-form-item label="启用/停用" label-width="100px" prop="enable">
          <el-switch v-model="formData.enable"></el-switch>
        </el-form-item>
        
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('formData')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.el-row {
  margin: 10px;
}
</style>
  <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { Route } from "vue-router";
import { PfmModule } from "@/store/modules/PfmRepo";
import { ConfModule } from "@/store/modules/ConfRepo";
import Tablels from "@/layout//components/Tablels/index.vue";
@Component({
  name: "performance-dic",
  components: {
    Tablels,
  },
})
export default class extends Vue {
  //数据填充信息
  private pageData: {
    content: Array<any>;
    totalElements: Number;
    totalPages: Number;
    fixCols: Array<any>;
    columns: Array<any>;
    size: Number;
    page: Number;
  } = {
    content: [],
    totalElements: 0,
    totalPages: 0,
    fixCols: [],
    columns: [],
    size: 10,
    page: 0,
  };

  //-----------编辑器相关代码--------
  private dialogFormVisible: boolean = false;
  private rules = {
    code: [
      { required: true, message: "编码不能为空", trigger: "blur" },
      { min: 1, max: 1000, message: "长度在 1 到 1000 个字符", trigger: "blur" },
    ],
    name: [
      { required: true, message: "编码不能为空", trigger: "blur" },
      { min: 1, max: 1000, message: "长度在 1 到 1000 个字符", trigger: "blur" },
    ],
  };
  private formData = {
    code: "",
    name: "",
    enable: false,
  };

  private async delRows(){
    if(!this.selectRows){
      this.$alert('请选择要操作的项','系统提示',{type:'error'});
      return;
    }
    this.$confirm('删除将无法恢复，您确定要删除吗？',{type:'warning'}).then(async()=>{
       let ids=this.selectRows?.map(it=>it.id);
       var rp=await ConfModule.dicDestorybyids(<any>ids);
      this.$alert((<any>rp).msg,'系统提示',{type:'success'});
      this.load();
    })
    
  }
  private async submitForm(form: string) {
    (<any>this.$refs[form]).validate( async (valid: boolean) => {
      if (valid) {
        var formModel=(<any>this.formData);
        if(!formModel.id){
          formModel.join={'name':(this.litQuery.docType||'p'),parent:(this.litQuery.id||null)};
        }
        var rp=await ConfModule.dicSave(formModel);
        this.$alert('操作成功！','系统提示',{type:'success'})
        this.dialogFormVisible = false;
        this.load();
      } else {
        return false;
      }
    });
  }
  //-----------编辑器相关代码 结束--------
  private async sizeChange(val: number) {
    this.litQuery.pageSize = val;
    this.litQuery.pageIndex = 1;
    this.load();
  }
  private async pageChange(val: number) {
    this.litQuery.pageIndex = val;
    this.load();
  }

  //查询参数
  private litQuery = {
    s: "",
    pageIndex: 1,
    pageSize: 10,
    docType: <string>(this.$route.query.docType || ""),
    id: <string>(this.$route.query.id || ""),
  };
  private listLoading = true;
  private async created() {
    this.load();
  }

  private goback() {
    [this.litQuery.docType, this.litQuery.id, this.litQuery.pageIndex] = [
      "",
      "",
      1,
    ];
    this.load();
  }
  private selectRow: any = {};
  private rowdbclick(row: any) {
    if (this.litQuery.docType == "c") {
      this.formData = row;
      this.dialogFormVisible = true;
      return;
    }

    this.litQuery.docType = "c";
    this.litQuery.id = row.id;
    this.selectRow = row;
    this.load();
  }

  private async load() {
    var rp: any = await ConfModule.dicls(this.litQuery);

    rp = rp.data;

    (rp.content || []).forEach((it: any) => {
      if (it.enable == null) it.enable = true;
    });

    [
      this.pageData.content,
      this.pageData.totalElements,
      this.pageData.totalPages,
      this.pageData.size,
      this.pageData.page,
    ] = [
      rp.content,
      rp.totalElements,
      rp.totalPages,
      rp.pageable.pageSize,
      rp.pageable.pageNumber + 1,
    ];

    this.listLoading = false;
  }
  private selectRows:Array<any>|undefined;

  private handleSelectionChange(row: Array<any>) {
    this.selectRow=row[row.length-1];
    this.selectRows=row;
  }

  //增加、修改
  private async edit(m:string,row: any) {

    if(m=='save'&&!(row||{}).id){
      this.$alert('请选择要操作的项！','系统提示',{type:'warning'})
      return;
    }
   
    this.dialogFormVisible = true;
    var nRow=JSON.parse(JSON.stringify(row || {enable:true}));
    this.formData = nRow;
  }
}
</script>